<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_边框与内间距.</title>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: lightgreen;
      border: 5px solid #00f;
      border: 5px dotted  #00f;
      border-top: 15px double #f00;
    }
    .d2{
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border-radius: 100px;/*边框圆角，值越大角越圆，值为正方形宽高的一半可以切正圆*/
    }
    .d3{
      width: 200px;
      height: 60px;
      background-color: #00F;
      border-radius: 30px;/*边框圆角为长方形高度的一般可以切胶囊型*/
    }
    .d4{
      width: 200px;
      height: 200px;
      background-color: orange;
      padding: 30px;/*加内间距会让元素变大*/
      border: 5px solid #000;/*加边框也会让元素变大*/
      margin: 20px;/*外间距真实存在，但不属于元素本身，不会让元素变大*/
      box-sizing: border-box;/*切换盒子模型计算方案为边框盒子，效果：将内间距与边框都算在预设的宽高之内！*/
    }
    span{
      background-color: rgba(255,0,0,.5);
      border: 2px solid #f00;
    }
    .s2{
      /*行内元素垂直方向上的内外间距都不生效*/
      padding: 50px;
    }
</style>
</head>
<body>
<span>span</span>
<span class="s2">span</span>
<span>span</span>
    <div class="d1"></div>
    <br>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4">我是测试内容</div>
</body>
</html>